<template>
	<div class="um-space" :style="styles">
		<slot></slot>
	</div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

interface SpaceProps {
	size?: number;
}

const props = withDefaults(defineProps<SpaceProps>(), {
	size: 20
});

const styles = computed(() => {
	return {
		gap: props.size + 'rpx'
	};
});
</script>

<style lang="scss">
.um-space {
	display: flex;
	gap: 20rpx;
	align-items: center;
}
</style>
